<template>
  <ex-dialog
    width="600px"
    class="ex-diolog"
    title="新建团体账号"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm ">
			<el-form-item label="团体名字：" prop="name">
				<el-input v-model="ruleForm.name" placeholder="请输入" maxlength="20"></el-input>
			</el-form-item>
      <el-form-item label="管理员登录账号：" prop="account">
				<el-input v-model="ruleForm.account" placeholder="请输入" maxlength="20"></el-input>
			</el-form-item>
      <div style="color: #1890ff;margin: -10px 0 0 350px">登录密码为登录账号</div>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')" v-if="pathType == 'add'">确认</el-button>
        <el-button type="primary" @click="editForm('ruleForm')" v-if="pathType == 'edit'">修改</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import { addOtherGroups,associationDetail,editAssociation} from "@/api/otherGroups";

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    return {
			ruleForm: {
				account: '',//活动店铺id
				name: '',//活动预付卡id
			},
			rules: {
          account: [
            { required: true,message: '请输入登录账号', trigger: 'change' }
          ],
          name: [
            { required: true,message: '请输入团体名字', trigger: 'change' }
          ],
        }
    }
  },
  computed: {
   
  },
  created() {
    if(this.pathType == 'edit'){
      this.getDetail()
      console.log('id',this.id)
    }
	},
  methods: {
    usedInPar(str){
      console.log(str);

    },
    
    //详情
    getDetail(){
      var data = {
        id: this.id
      }
			associationDetail(data).then(res => {
        const {result} = res
        console.log('platformDetail',result)
        this.ruleForm.account = result.account
        this.ruleForm.name = result.name
       
      }).finally(() => {
        this.loading = false
      })
    },
   
    //新建子账号
    submitForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          var data = {
            ...this.ruleForm
          }
          addOtherGroups(data).then(res => {
            this.handleSuccess("创建成功")
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //修改
    editForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          var data = {
            id: this.id,
            ...this.ruleForm
          }
          editAssociation(data).then(res => {
            this.handleSuccess("修改成功")
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
  
}
.el-input{
    width: 310px !important; 
  }
</style>
